<template>
	<div class="jk-num-input">
		<el-input
			v-model="currentValue"
			:size="size"
			:placeholder="placeholder"
			:disabled="disabled"
			:clearable="clearable"
			@blur="onBlur"
			@change="handleChange"
		></el-input>
	</div>
</template>
<script>
    export default {
        name: 'JkNumInput',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            clearable: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            max: {
                type: Number,
                default: Infinity
            },
            min: {
                type: Number,
                default: 0
            },
            value: {
                type: [Number, String],
                default: 0
            },
            precision: {
                type: Number,
                default: 0
            },
            placeholder: {
                type: String,
                default: ''
            },
            size: {
                type: String,
                default: 'medium'
            }
        },
        data() {
            return {
                currentValue: 0
            };
        },
        methods: {
            formatNum() {
                let val = null;
                if (!this.currentValue) {
                    val = null;
                } else {
                    val = this.currentValue.toString();
                    val = val.trim();
                    val.replace(/[^\d.]/g, '');
                    val = parseFloat(val);
                }

                // 限制最大/最小值
                if (val >= this.max) {
                    val = this.max;
                }
                if (val <= this.min) {
                    val = this.min === 0 ? null : this.min;
                }
                // 保留小数
                if (this.precision) {
                    if (val) {
                        let strVal = '1';
                        for (let i = 0; i < this.precision; i++) {
                            strVal += '0';
                        }
                        const numVal = parseFloat(strVal);
                        val = parseInt(val * numVal) / numVal;
                    }
                } else {
                    if (val) {
                        val = parseInt(val);
                    }
                }
                this.currentValue = val;
            },
            onBlur() {
                this.formatNum();
                this.$emit('blur', this.currentValue);
            },
            handleChange() {
                this.formatNum();
                this.$emit('change', this.currentValue);
            }
        },
        watch: {
            value: {
                handler(val) {
                    this.currentValue = isNaN(Number(val)) ? 0 : Number(val);
                    this.formatNum();
                },
                immediate: true,
                deep: true
            }
        }
    };
</script>
<style scoped>
    .jk-num-input >>> .el-input__inner {
        /*text-align: right!important;*/
    }
</style>
